<template>
	<view style=";min-height:100vh;" :style="{'backgroundColor':contestinfo.color}">
		<view class='flash-sale'>
			<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow">
			</view>
			<view class='head'>
				<view v-if="contestinfo.userImages.length!==0" class='header'>
					<view class="success_per">
						<view class="success_num">{{contestinfo.joinTotal}}人已报名参赛</view>
						<view class="activity_pic">
							<!-- combinationUserList.slice(0,10)" -->
							<view v-for="(item,index) in contestinfo.userImages.slice(0,10)" class="picture" :key="index">
								<image v-if="index != 9" class="avatar" :src='item'></image>
								<span v-else class="avatar" style="background:#fff;"><text
										class="iconfont icon-gengduo1"></text></span>
							</view>
						</view>
					</view>
				</view>
				<image :src="contestinfo.bg_image" style="width:100%" mode="widthFix"></image>
				<!-- <user-name-swiper class="name-swiper" :style="'top:'+ (navH/2) +'rpx'" :combinationUserList="combinationUserList"></user-name-swiper> -->
			</view>
			
			<view class="matchinfo">
				<image v-if="contestinfo.type===1" class="endimg" src="../static/images/ss_zt_end.png" mode="widthFix">
				</image>
				<view class="matchtitle">
					{{contestinfo.name}}
				</view>
				<!-- <view v-if="contestinfo.type===2 && contestinfo.is_apply===2" class="matchstateTime"  >
					活动状态：{{contestinfo.type===2 && contestinfo.isSign==1?'已报名'}}报名已结束
				</view> -->
				<view class="matchstateTime">
					活动时间: {{contestinfo.start_time}}-{{contestinfo.end_time}}
				</view>
				<view class="matchbottominfo" v-if="contestinfo.sponsor.length">
					<view v-for="(item,index) of contestinfo.sponsor" :key="index" class="">
						{{item.options}}: {{item.value}}
					</view>
				</view>
				<view class="matchrule">
					<view v-if="contestinfo.statistics.length>0" class="matchDataing">
						<view v-for="(item,index) of contestinfo.statistics" :key="index" class="mditem">
							<view class="mdtitle">
								{{item.options}}
							</view>
							<view class="mdnum">
								{{item.value}}
							</view>
						</view>
					</view>
					<view class="matchruletitle">
						<view class="mtitle">赛事规则</view>
						<view class="textline">

						</view>
					</view>
					<view id="matchrulecon" class="matchrulecon" :class="(isopenshrink && defaultshrink)?'ishrink':''">
						<rich-text style="line-height:44rpx;" :nodes="contestinfo.content"></rich-text>
						<!-- {{contestinfo.content}} -->
					</view>
					<view v-if="isopenshrink" class="openshrink" >
						<view  v-if="defaultshrink" class="openmatchrule" style="padding-top:20rpx;" @click="defaultshrink=false">
							<text>展开更多</text>
							<image src="../static/images/ss_zt_down.png" mode=""></image>
						</view>
						<view v-else class="openmatchrule" @click="defaultshrink=true" >
							<text>收起更多</text>
							<image src="../static/images/ss_zt_up.png" mode=""></image>
						</view>
					</view>
					
				</view>
			</view>
			<view class="lbrecommend">
				<swiper class="lbsw" :autoplay="true" circular indicator-dots indicator-color="#fff" indicator-active-color="#E93323"  :current="lbActive" @change="lbchange">
					<swiper-item class="lbswi" v-for="(item,index) of contestinfo.images" :key="index">
						<image class="lbimg" :src="item" mode=""></image>
					</swiper-item>

				</swiper>
				<!-- <view class="lbpoint">
					<view class="lbpos" :class="lbActive===index?'active':''" v-for="(item,index) of contestinfo.images"
						:key="index">
					</view>
				</view> -->
			</view>
			<!-- 品牌好店 -->
			<view v-if="contestinfo.merchantList.list.length" class="explosion">
				<view class="matchruletitle">
					<view class="mtitle">参赛商家</view>
					<view class="textline">
					</view>
				</view>
				<view class="mer-box">
					<view class="mer-item" v-for="(item,index) in contestinfo.merchantList.list" :key='index'>
						<view class="mer-hd" @click="goStore(item.mer_id)">
							<view class="mer-name">
								<image :src="item.mer_avatar"></image>
								<view class="txt line1">{{item.mer_name}}</view>
								<text v-if="item.type_name" class="font-bg-red ml8">{{item.type_name}}</text>
								<text v-else-if="item.is_trader" class="font-bg-red ml8">自营</text>
							</view>
						</view>
						<view class="pro-box">
							<navigator :url="`/pages/goods_details/index?id=${itemn.product_id}`" hover-class="none"
								class="pro-item" v-for="(itemn,indexn) in item.recommend" :key='indexn'
								v-if="item.recommend.length<=3">
								<image :src="itemn.image" mode=""></image>
								<view class="price">
									<text>￥</text>{{itemn.price}}
								</view>
							</navigator>
						</view>
					</view>
					<!-- <view class="more-shop" @click="moreShop">
           			<text>
           				更多店铺
           			</text>
           			<text class="iconfont icon-xiangyou"></text>
           		</view> -->
				</view>
			</view>

			<view v-if="contestinfo.type===2 && contestinfo.isSign===0 &&contestinfo.is_apply!=2" class="" style="height: 110rpx;">
				<!-- 商家可以直接报名。
				分销员报名：
				姓名，电话，身份证号，单位，
				直播报名：
				姓名，电话，身份证号，微信号，单位， -->
			</view>
			<view v-if="contestinfo.type===2 && contestinfo.isSign===0 &&contestinfo.is_apply!=2" class="signupbox">
				<view v-if="userType!=3" class="signupbtn" @click="singbtn(1)">
					<view class="singuptitle">
						选手报名
					</view>
					<view class="singupnum">
					</view>
				</view>
				<view v-if="userType===3" class="signupbtn" @click="singbtn(2)">
					<view class="singuptitle">
						商家报名
					</view>
					<view class="singupnum">
						<!-- (136) -->
					</view>
				</view>
				<!-- <view class="signupbtn" @click="singbtn(3)">
					<view class="singuptitle">
						主播报名
					</view>
					<view class="singupnum">
					</view>
				</view> -->
			</view>
			<view class="singshadow" v-if="isshowsing">
				<view class="singbox">
					<view class="closebtn" @click="clsesingshadow">
						<image src="../static/images/close.png" mode=""></image>
					</view>
					<view class="singtypetitle">
						{{shadowTypesing===1?'分销员报名':shadowTypesing===3?'主播报名':''}}
					</view>
					<view class="singipt">
						<view class="singiptleft">
							你的姓名:
						</view>
						<input class="singiptright" v-model="name" type="text" placeholder="请输入您的姓名" />
					</view>
					<view class="singipt">
						<view class="singiptleft">
							联系电话:
						</view>
						<input class="singiptright" v-model="phone" type="text" placeholder="请输入您的联系电话" />
					</view>
					<view class="singipt">
						<view class="singiptleft">
							身份证号:
						</view>
						<input class="singiptright" v-model="card_id" type="text" placeholder="请输入您的身份证号" />
					</view>
					<view class="singipt">
						<view class="singiptleft">
							单位名称:
						</view>
						<input class="singiptright" v-model="unit" type="text" placeholder="请输入您的单位名称" />
					</view>
					<view class="singipt">
						<view class="singiptleft">
						  用户群体:
						</view>
						<!-- <input  disabled class="singiptright" v-model="unit" type="text" placeholder="请选择用户群体" /> -->
						<view class="picuserbox">
							 <picker class="picuser" @change="bindPickerChange" :value="user_type" :range="user_typearray" range-key="tag">
							     <view style="" class="usertag">{{user_typearray[user_type].tag}}</view>
							  </picker>
						</view>
					</view>
					<view v-if="shadowTypesing===3" class="singipt"> 
						<view class="singiptleft">
							微信号:
						</view>
						<input class="singiptright" v-model="weixinId" type="text" placeholder="请输入用于主播的微信号" />
					</view>
					<view class="ising" @click="bmbtn">
						我要报名
					</view>
				</view>
			</view>
		</view>
		<view class="bottomhei">
			
		</view>
		<!-- 成为分销员 -->
		<view v-if="isbecomedis" class="becomeDistributor">
			<view class="distributorbox">
				<view class="distitle">
					<view class="">
						现在您还不是平台的分销推广员哟~

					</view>
					<view class="">
						您是否愿意成为平台的分销推广员？
					</view>
				</view>
				<view class="disdesc">
					<view class="">
						分销推广员可以享受到推广返佣
					</view>
					<view class="">
						同时佣金还能提现！
					</view>
				</view>
				<view class="distribtn">
					<view class="surebtn" @click="becomefxy">
						我同意
					</view>
					<view class="backbtn" @click="isbecomedis = false">
						返回
					</view>
				</view>
			</view>
		</view>
		<home></home>
		<label for="shares">
			<view class="sharebtn">
				<image src="../static/images/ss_zt_fx.png" mode=""></image>
			</view>
		</label>

		<button id="shares" type="default" open-type="share"></button>
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
	</view>
</template>



<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getCombinationList,
		getActivitycategory
	} from '../../../api/activity.js';
	import {
		matchadduser,
		getContestInfo,
		getUserType,
		userregisterfxy
	} from '../../../api/match.js';
	import home from '@/components/home/index.vue'
	import tabNav from '@/components/combinNav'
	import userNameSwiper from '@/components/userNameSwiper/userNameSwiper.vue'
	import authorize from '@/components/Authorize';
	import {
		getIndexData
	} from '@/api/api.js';
	import {
		storeMerchantList,
	} from '@/api/store.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	let app = getApp();
	export default {

		components: {
			home,
			tabNav,
			userNameSwiper,
			authorize
		},
		data() {
			return {
				navH: '',
				lbActive: 0, // 轮播图
				brandList: [],
				isshowsing: false,
				shadowTypesing: 1,
				isFixed: false,
				returnShow: false,
				avatar: '../../../static/images/f.png',
				contestinfo: {
					images: [],
					merchantList: {
						list: []
					},
					userImages: [],
					start_time: '',
					end_time: '',
					name: "",
					efficient: '',
					statistics: [],
					sponsor: []

				},
				contestId: null,
				userType: null,
				id: null,
				name: '',
				phone: '',
				card_id: '',
				unit: '',
				weixinId: '',
				user_type:0,
				user_typearray:[
					{
						tag:'大学生群体'
					},
					{
						tag:'社会人士'
					}
				],
				isopenshrink:false,
				defaultshrink:true,
				isbecomedis: false, // 成为分销员弹窗
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			console.log(options)
			var {
				id
			} = options
			this.contestId = id
			var pages = getCurrentPages();
			this.navH = app.globalData.navHeight;
			// this.storeMerchant()

		},
		onShow() {
			if (this.isLogin) {
				var pages = getCurrentPages();
				this.navH = app.globalData.navHeight;
				this.getContestInfo() 
				this.init()
				
			} else {
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true);
			}
		},
		methods: {
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.user_type = e.target.value
			        },
			onLoadFun() {
				this.isShowAuth = false;
				this.getContestInfo()
				this.init()
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 报名
			async bmbtn() {
				console.log(this.user_typearray[this.user_type].tag)
				// 判断是什么报名
				var usermatchtype = this.shadowTypesing
				const {
					name,
					phone,
					card_id,
					unit,
					weixinId,
					contestId
				} = this
				if (name.trim() == '') {
					return uni.showToast({
						title: '姓名不能为空',
						icon: "none"
					})
				}
				if (phone.trim() == '') {
					return uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					})
				}
				if (card_id.trim() == '') {
					return uni.showToast({
						title: '身份证号不能为空',
						icon: "none"
					})
				}

				if (unit.trim() == '') {
					return uni.showToast({
						title: '单位不能为空',
						icon: "none"
					})
				}

				if (usermatchtype === 3) { //主播报名
					if (weixinId.trim() == '') {
						return uni.showToast({
							title: '微信号不能为空',
							icon: "none"
						})
					}
					var data = {
						name,
						phone,
						card_id,
						unit,
						weixinId,
						contestId,
						type: 1,
						user_type:this.user_typearray[this.user_type].tag
					}
				} else if (usermatchtype === 1) { //分销员报名
					var data = {
						name,
						phone,
						card_id,
						unit,
						contestId,
						type: 0,
						user_type:this.user_typearray[this.user_type].tag
					}
				}
				uni.showLoading({
					title: '报名中。。。'
				})
				
				var res = await matchadduser(data)
				console.log(res, "报名返回的数据")
				// 成功以后
				//清空数据
				this.name = ''
				this.phone = ''
				this.card_id = ''
				this.unit = ''
				this.weixinId = ''
				// 关闭弹窗
				this.isshowsing = false
				// 重新更新页面
				await this.getContestInfo()
				uni.showToast({
					title: "报名已提交"
				})
			},
			async init() {
				var res = await getUserType()
				console.log(res, 99)
				// 判断是有有1  商家
				var boo3 = res.data.some(r=> r==1)
				var boo2 = res.data.some(r=> r==2)
				if(boo3){
					this.userType = 3
				}else if(boo2){
					this.userType = 2
				}else{
					this.userType = 1
				}
				// console.log(boo3)
				// this.userType = res.data.type
				// this.userType =3
			},
			// 获取赛事详情
			async getContestInfo() {
				var data = {
					contestId: this.contestId
				}
				var res = await getContestInfo(data)
				res.data.joinTotal = res.data.shopUserNum + res.data.anchorUserNum + res.data.UserNum
				// this.contestinfo = res.data
				this.$set(this,'contestinfo',res.data)
				
				// this.contestinfo.sponsor = []
				// this.$set(this.contestinfo,'content',res.data.content)
				this.isopenshrink = false
				this.$nextTick(()=>{
						uni.createSelectorQuery().select("#matchrulecon").boundingClientRect(madominfo=>{
								console.log(madominfo,8889)
								console.log(madominfo)
								var mahei = madominfo.height
								console.log(mahei)
								if(mahei>200){
									this.isopenshrink = true
								}else{
									this.isopenshrink = false
								}
							}).exec()
					})
				
				
				// console.log(res, "赛事详情数据")
			},
			// 成为分销员
			async becomefxy() {
				uni.showLoading({
					
				})
				var res = await userregisterfxy()
				uni.hideLoading()
				this.userType = 2
				this.isbecomedis = false
				this.isshowsing = true
			},
			// 打开报名
			singbtn(type) {
				console.log(type)
				switch (type) {
					case 1:
						// this.shadowTypesing = type
						// // 判断省份是不是分销员
						// if (this.userType !==2 &&  this.userType !=3) {
						// 	this.isbecomedis = true
						// } else {
						// 	this.isshowsing = true
						// }
						var track_arr =this.contestinfo.track_arr? this.contestinfo.track_arr.join():''
						uni.navigateTo({
							url:"../matchsingup/index?contestId=" + this.contestId+'&track_arr='+track_arr
						})
						break;
					case 2:

						uni.showModal({
							title: '报名参赛',
							content: '您是否确定以商家身份报名',
							success: async (res) => {
								console.log(res)
								if (res.confirm) {
									var data = {
										type: 2,
										contestId: this.contestId
									}
									uni.showLoading({
										title: '报名中。。。'
									})
									var res = await matchadduser(data)
									await this.getContestInfo()
									console.log()
									uni.showToast({
										title: "报名成功"
									})
								}
							}
						})
						break;
					case 3:
						this.isshowsing = true
						this.shadowTypesing = type
						break;
					default:
						break;
				}
			},
			// 关闭报名弹窗
			clsesingshadow() {
				this.isshowsing = false
			},
			// 品牌好店
			storeMerchant() {
				storeMerchantList({
					page: 1,
					limit: 3,
					is_best: 1,
					categoryId: '301'
				}).then(res => {
					console.log()
					this.brandList = res.data.list;
				})
			},
			// 进店
			goStore: function(id) {
				if (this.hide_mer_status != 1) {
					uni.navigateTo({
						url: `/pages/store/home/index?id=${id}`
					})
				}
			},
			// 切换轮播图
			lbchange(e) {
				console.log(e)
				let {
					current,
					source
				} = e.detail
				if (source === 'autoplay' || source === 'touch') {
					//根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
					this.lbActive = e.detail.current
				}
				
			},
			goBack: function() {
				uni.navigateBack();
			},


		},
		// 滚动监听
		onPageScroll(e) {
			// #ifdef H5
			let self = this
			if (e.scrollTop >= self.searchH) {
				self.isFixed = true
			} else {
				self.isFixed = false
			}
			// #endif
		},
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: this.contestinfo.name,
				path: 'pages/match/matchDetail/index?id=' + this.contestId,
			}
		},

	}
</script>

<style lang="scss">
	page {
		// background: #e93323;
	}

	.icon-xiangzuo {
		font-size: 40rpx;
		color: #fff;
		position: fixed;
		left: 30rpx;
		z-index: 99;
		transform: translateY(-20%);

	}

	.head {
		/* #ifdef MP */
		// height: 576rpx;

		/* #endif */
		/* #ifdef H5 */
		height: 490rpx;
		/* #endif */
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
        position:relative;
		.name-swiper {
			position: absolute;
			// #ifdef H5
			top: 48rpx;
			// #endif
			// #ifdef MP
			top: 134rpx;
			// #endif
			left: 100rpx;
		}

	}

	.header {
		

		position: absolute;
		width:100vw;
		top:30rpx;
		.success_per {
			// position: absolute;
			width: 100%;
			text-align: center;
			/* #ifdef MP */
			bottom: 140rpx;
			/* #endif */
			/* #ifdef H5 */
			bottom: 120rpx;
			/* #endif */

			left: 0;

			.success_num {
				color: #f1e87e;
				font-size: 26rpx;
			}
		}
	}

	.activity_pic {
		margin-left: 20rpx;
		padding-left: 20rpx;
		position: relative;
		display: inline-block;
		margin-top: 17rpx;
		background: rgba(0, 0, 0, .15);
		padding: 13rpx 24rpx 13rpx 14rpx;
		border-radius: 33rpx;

		// &::before {
		// 	content: "";
		// 	display: inline-block;
		// 	width: 2rpx;
		// 	height: 40rpx;
		// 	background: #DCDCDC;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// }

		.picture {
			display: inline-block;
		}

		.avatar {
			width: 46rpx;
			height: 46rpx;
			line-height: 20rem;
			display: inline-block;
			background-repeat: no-repeat;
			background-size: center/cover;
			position: relative;
			text-align: center;
			color: #fff;
			font-weight: 600;
			vertical-align: bottom;
			font-size: .875rem;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 0 0;
			margin-right: -10rpx;
			box-shadow: 0 0 0 1px #fff;
			position: relative;

			text {
				position: absolute;
				line-height: 42rpx;
				color: #8E8E8E;
				width: 42rpx;
				left: 0;

			}
		}

		.pic_count {
			margin-left: 30rpx;
			color: #999999;
			font-size: 26rpx;
			position: relative;
			top: -4rpx;
		}
	}

	.noCommodity {
		border-top: none;
	}
    .flash-sale{
		padding-bottom:60rpx;
	}
	.flash-sale .header {
		width: 100%;
		// position: relative;
		// margin-top: 10px;
		 
	}

	.flash-sale .main_count {
		position: relative;
		top: 0rpx;

	}

	.flash-sale .header .presellBg {
		width: 750rpx;
	}

	.matchinfo {
		width: 707rpx;
		// height: 869rpx;
		margin: auto;
		background-color: #fff;
		position: relative;
		margin-top: 30rpx;
		border-radius: 10rpx;
		padding-bottom: 10px;

		.endimg {
			position: absolute;
			top: -30rpx;
			right: 30rpx;
			width: 151rpx;
			// height: 131rpx;
		}

		.matchtitle {
			width: 400rpx;
			font-size: 34rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #000000;
			text-align: center;
			margin: 0rpx auto 10rpx;
			padding-top: 20rpx;
			line-height: 50rpx;

		}

		.matchstateTime {
			// width: 500rpx;
			font-size: 26rpx;
			font-family: SourceHanSansCN;
			font-weight: 500;
			color: #E11010;
			text-align: center;
			margin: auto;
		}

		.matchrule {

			width: 100%;
			box-sizing: border-box;

			.matchruletitle {
				position: relative;
				margin: 30rpx auto;
				width: 657rpx;
				box-sizing: border-box;

				.mtitle {
					font-size: 31rpx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: #E44854;
					position: relative;
					z-index: 2;
					background-color: #fff;
					text-align: center;
					width: 200rpx;
					margin: auto;
				}

				.textline {
					position: absolute;
					width: 100%;
					height: 1px;
					background-color: rgba(0, 0, 0, .1);
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					z-index: 1;

				}
			}

			.matchDataing {
				width: 100%;
				height: 129rpx;
				background: rgba(109, 102, 102, .1);
				border-radius: 2rpx;
				margin: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.mditem {
					display: flex;
					height: 100%;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.mdtitle {
						font-size: 25rpx;
						font-family: SourceHanSansCN;
						font-weight: 300;
						color: #000000;
						height: 30rpx;
					}

					.mdnum {
						font-size: 32rpx;
						font-family: Arial;
						font-weight: 400;
						color: #000000;
						height: 30rpx;
						margin-top: 15rpx;

					}
				}
			}

			.matchrulecon {
				font-size: 25rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #000000;
				line-height: 39rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
			.matchrulecon.ishrink{
				height:400rpx;
				overflow:hidden;
			}
			.openshrink{
				.openmatchrule{
					display:flex;
					align-items: center;
					justify-content: center;
					text{
						font-size: 30rpx;
						font-weight: 400;
						color: #787878;
					}
					image{
						    width: 35rpx;
						    height: 32rpx;
							margin-left:10rpx;
					}
				}
			}
		}
	}

	.lbrecommend {
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.lbsw {
			width: 707rpx;
			height: 260rpx;
			border-radius: 10rpx;
			margin: auto;

			.lbswi {
				width: 100%;
				height: 100%;

				.lbimg {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}

		.lbpoint {
			display: flex;
			align-items: cneter;
			justify-content: center;
			margin-top: 10rpx;

			.lbpos {
				width: 14rpx;
				height: 14rpx;
				background: #FFFFFF;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.lbpos.active {
				background-color: blue;
			}
		}
	}

	.explosion {
		width: 707rpx;
		margin: auto;
		background-color: #fff;
		padding-top: 10rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		margin-bottom:30rpx;

		.matchruletitle {
			position: relative;
			margin: 30rpx auto;
			width: 657rpx;
			box-sizing: border-box;

			.mtitle {
				font-size: 31rpx;
				font-family: SourceHanSansCN;
				font-weight: 500;
				color: #E44854;
				position: relative;
				z-index: 2;
				background-color: #fff;
				text-align: center;
				width: 200rpx;
				margin: auto;
			}

			.textline {
				position: absolute;
				width: 100%;
				height: 1px;
				background-color: rgba(0, 0, 0, .1);
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 1;

			}
		}

		.mer-box {
			.mer-item {
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 16rpx;
				border-bottom: 1px solid rgba(0, 0, 0, .1);

				.mer-hd {
					position: relative;
					width: 100%;
					// height: 200rpx;
					height: 80rpx;
					border-radius: 16rpx 16rpx 0 0;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}

					.mer-name {
						position: absolute;
						left: 20rpx;
						top: 20rpx;
						display: flex;
						align-items: center;
						// width: 300rpx;
						height: 50rpx;
						padding: 0 10rpx;
						border-radius: 26rpx;
						background: #fff;
						font-weight: bold;

						image {
							width: 38rpx;
							height: 38rpx;
							margin-right: 10rpx;
							border-radius: 50%;
						}

						.txt {
							flex: 1;
						}
					}
				}

				.pro-box {
					display: flex;
					align-items: center;
					padding: 20rpx 20rpx 30rpx;

					.pro-item {
						width: 218rpx;
						margin-right: 14rpx;

						image {
							width: 100%;
							height: 214rpx;
						}

						.price {
							margin-top: 5rpx;
							font-size: 28rpx;
							color: $theme-color;
							font-weight: bold;

							text {
								font-size: 28rpx;
							}
						}

						&:last-child {
							margin-right: 0;
						}
					}


				}


			}

			.more-shop {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFFFFF;
				padding: 27rpx 0;
				color: #999999;
				font-size: 26rpx;

				.icon-xiangyou {
					font-size: 22rpx;
				}
			}
		}
	}

	.matchbottominfo {
		width: 666rpx;
		margin:auto;
		// height: 222rpx;
		background-color: #f7f6f6;
		opacity: 0.8;
		// display: flex; 
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding:38rpx 30rpx;
		box-sizing: border-box;
		margin-top: 40rpx;

		view {
			// text-align: left;
			font-size: 26rpx;
			font-family: SourceHanSansCN;
			font-weight: 600;
			color: #000;
			margin-top: 18rpx;

		}
	}

	.signupbox {
		width: 750rpx;
		height: 110rpx;
		background: #E44854;

		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		.signupbtn {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			border-right: 1px solid rgba(248, 217, 46, .5);

			.singuptitle {
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
			}

			.singupnum {
				font-size: 22rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #F8D92E;
				margin-top: 10rpx;
			}
		}

		.signupbtn:last-child {
			border: 0;
		}
	}

	.singshadow {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9;

		.singbox {
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #fff;

			.closebtn {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 35rpx;
					height: 35rpx;
				}
			}

			.singtypetitle {
				font-size: 31rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #000000;
				text-align: center;
				padding-top: 45rpx;
			}

			.singipt {
				width: 625rpx;
				height: 80rpx;
				background: #FFFFFF;
				border: 1px solid #B5B5B5;
				border-radius: 21rpx;
				display: flex;
				align-items: center;
				margin: auto;
				margin-top: 20rpx;

				.singiptleft {
					width: 205rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #6D6666;
					text-align: right;
					margin-right: 33rpx;
					
				}
				.picuserbox{
					height:80rpx;width:380rpx;
					.picuser{
						height:80rpx;width:380rpx;
						.usertag{
							height:80rpx;width:380rpx;line-height:80rpx;
							font-size: 25rpx;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #6D6666;
							background-image: url(../static/images/ss_zt_down.png);
							background-repeat: no-repeat;
							background-position: 80% 51%;
						}
					}
				}

				.singiptright {
					width: 380rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #6D6666;
					height:80rpx;
					line-height:80rpx;
				}
			}

			.ising {
				width: 625rpx;
				height: 80rpx;
				background: #E44854;
				border: NaNpx solid #E44854;
				border-radius: 21rpx;
				margin: auto;
				font-size: 31rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin-top: 50rpx;
				margin-bottom: 40rpx;
			}
		}
	}

	.sharebtn {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 2;
		top: 0;
		right: 0;

		image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.becomeDistributor {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;

		.distributorbox {
			background-color: #fff;
			width: 615rpx;
			height: 381rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.distitle {
				view {
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #DA1616;
					text-align: center;
					line-height: 40rpx;
				}
			}

			.disdesc {
				margin-top: 33rpx;

				view {
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #727070;
					text-align: center;
					line-height: 40rpx;
				}
			}

			.distribtn {
				display: flex;
				justify-content: space-between;
				margin-top: 38rpx;

				.surebtn {
					width: 213rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #DA1616;
					border-radius: 14rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;


				}

				.backbtn {
					width: 213rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1px solid #B5B5B5;
					border-radius: 14rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
				}
			}
		}

	}
	
	.bottomhei{
		width: 750rpx;
		height: 30rpx;
		background: #C4C3C3;
	}
</style>
